<template>
    <rx-dialog @handOk="handleSubmit" @cancel="cancel">
        <div  class="appGrant">
            <!--左边授权-->
            <div class="appGrantLeft">
                <a-form>
                    <a-form-item :label="i18n('empower.apiName','接口名称')">
                        <a-input style="width: calc(100% - 80px)" :placeholder="i18n('empower.apiName','接口名称','input')" allowClear v-model="queryParam.Q_API_NAME__S_LK"/>
                        <a-button style="margin-left: 10px" @click="$refs.table.loadData()">{{$ti18('rxList.searchBtn','查询')}}</a-button>
                    </a-form-item>
                </a-form>
                <div>
                    <rx-layout>
                        <div slot="left" width="200" showButton="true">
                            <rx-fit>
                                <rx-category-treeeditor
                                    cat-key="EXTERNAL_API"
                                    :statisticConfig="statisticConfig"
                                    :edit="false"
                                    @handSelect="handSelect"
                                    :async="true"
                                    :isAdmin="false"
                                    :checkToDel="false"
                                    :isGrant="false"
                                ></rx-category-treeeditor>
                            </rx-fit>
                        </div>
                        <div slot="center">
                            <rx-grid
                                ref="table"
                                :bordered="true"
                                :allowRowSelect="true"
                                :multiSelect="true"
                                :columns="columns"
                                :defaultPageSize="10"
                                url="/api-system/system/core/sysExternalApi/query"
                                :queryParam="queryParam"
                                data-field="result.data"
                                :pageSizeOptions="['10','30','40']"
                                id-field="id"
                                @selectChange="onSelectChange"
                            >
                                <span slot="type" slot-scope="{ text, record }">
                                    <a-tag :color="tagMap[text].color">
                                        <span>{{ tagMap[text].text }}</span>
                                    </a-tag>
                                </span>
                            </rx-grid>
                        </div>
                    </rx-layout>
                </div>
                <!--移过去-->
                <div class="appGrantRight" @click="selectApi"><a-icon type="right" /></div>
            </div>
            <div class="appGrantRights">
                <div class="appGrantTableApi"><span>{{i18n('empower.selectedApi','选中的API')}}</span><span>{{i18n('empower.selected','已经选中')}} <a>{{sysAuthsServices.length}}</a> {{i18n('empower.individual','个')}}</span></div>
                <div class="appGrantTableList">
                    <div class="appGrantCheckbox">
                        <div><a-checkbox v-model="check" @change="changeAll">{{$ti18('rxList.selectAll','全选')}}</a-checkbox></div>
                        <div @click="delAll"><i class="iconfont icontrash"></i>{{i18n('empower.delAll','删除选中')}}</div>
                    </div>
                    <div class="appGrantContent">
                        <a-checkbox-group v-model="checkAll" style="width: 100%" @change="onChange">
                            <div v-for="(obj,index) in sysAuthsServices" :key="index">
                                <ul class="appGrantTable">
                                    <li v-for="(auth,index) in obj.child">
                                        <a-checkbox :value="auth.url" style="margin-right: 10px"></a-checkbox>
                                        <span class="appGrantTableHead"
                                              :class="{'color_798fff':(auth.method=='POST'),'color_83cd6c':(auth.method=='GET'),'color_ffbb3f':(auth.method=='PUT'),'color_ff6d6d':(auth.method=='DELETE')}">{{auth.method}}</span>
                                        <span :title="auth.apiName || auth.url">{{auth.apiName || auth.url}}</span>
                                        <span ><i @click="delAuth(auth)" class="iconfont icontrash"></i></span>
                                    </li>
                                </ul>
                            </div>
                        </a-checkbox-group>
                    </div>
                </div>
            </div>
        </div>
    </rx-dialog>
</template>

<script>
import SysAppAuthApi from "@/api/system/core/sysAppAuth";
import PublicApi from "@/api/system/core/public";
import {Util,BaseList} from "@lowcode/jpaas-common-lib";
import RxCategoryTreeeditor from "@/components/redxun/rx-category-treeeditor.vue";

export default {
    name: 'SysAppGrant',
    components: {RxCategoryTreeeditor},
    mixins: [BaseList],
    props:{
        pkId:String,
        layerid: String,
        destroy:Function
    },
    data() {
        return {
            //微服务
            services: [],
            //已授权接口
            sysAuths:[],
            //已授权接口分类
            sysAuthsServices:[],
            //选中要删除的多选
            checkAll:[],
            check:false,
            tagMap:{
                form: {color: 'green', text: this.i18n('empower.form','表单')},
                sql: {color: 'orange', text: this.i18n('empower.customQuery','自定义查询')},
                script: {color: 'purple', text: this.i18n('empower.callScripts','调用脚本')},
                liteFlow: {color: 'yellow', text: this.i18n('empower.callLiteFlow','执行规则引擎')},
                default: {color: 'red', text: this.i18n('empower.sysApi','系统接口')},
                custom: {color: 'blue', text: this.i18n('empower.customApi','自定义接口')}
            },
            columns: [
                {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 50, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                {title: this.i18n('empower.apiName','接口名称'), dataIndex: 'apiName', width: 150},
                /*{title: this.i18n('empower.service','所属服务'), dataIndex: 'service', width: 100},*/
                {title: this.i18n('empower.method','请求方法'), dataIndex: 'method', width: 100},
                {title: this.i18n('empower.type','类型'), dataIndex: 'type', width: 100, scopedSlots: {customRender: 'type'}},
                {title: this.i18n('empower.path','路径'), dataIndex: 'path', width: 250}
            ],
            //选择的服务
            selectService:"",
            statisticConfig: {
                type:"static_system",
                table:"SYS_EXTERNAL_API",
                field:"CATEGORY_ID_",
                whereConf: []
            },
        }
    },
    created() {
        this.getSysAuths();
        this.loadPermissions();
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"SysAuthManager",key);
        },
        getSysAuths(){
            SysAppAuthApi.findListByAppId(this.pkId).then(res => {
                if(res){
                    this.sysAuths = res;
                    this.reconsitution()
                }
            })
        },
        onload_(values) {},
        loadPermissions() {
            var self_ = this;
            PublicApi.getAppServices().then(res => {
                self_.services = res.map(item=>{
                    return {title: item, key: item}
                })
                //默认选中第一个
                self_.selectService = self_.services['0'].key;
              //  self_.serviceChange();
                self_.reconsitution()
            })
        },
        /*serviceChange(){
            if(this.selectService){
                this.queryParam.Q_SERVICE__S_EQ=this.selectService;
            }else {
                this.queryParam={};
            }
            this.$refs.table.loadData();
        },*/
        selectApi(){
            for (let i = 0; i < this.selectedRows.length; i++) {
                var selectedRow=this.selectedRows[i];
                var sysAuth= this.sysAuths.find(item =>(item.url==selectedRow.path && item.method==selectedRow.method));
                if(!sysAuth){
                    var obj= {
                        appId: this.pkId,
                        method:selectedRow.method,
                        url:selectedRow.path,
                        service:selectedRow.service,
                        apiName:selectedRow.apiName
                    }
                    this.sysAuths.push(obj);
                }
            }
        },
        delAuth(obg){
            this.checkAll.push(obg.url)
            this.delAll();
        },
        handleSubmit(){
            Util.closeWindow(this, "ok",this.sysAuths);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
        save() {
            const data = []
            var this_ = this;
            const checkedAll = this.checkedKeys.concat(this.halfCheckedKeys);
            this.allMenusList.forEach(item => {
                checkedAll.forEach(checkId => {
                    if (item.key === checkId) {
                        var obj = {
                            appId: this_.id,
                            method: item.methodType,
                            url: item.key,
                        }
                        data.push(obj)
                    }
                })
            })
            return SysAppAuthApi.saveSysAppAuth(Object.assign(data));
        },
        reconsitution(){
            var _this = this;
            _this.sysAuthsServices = this.services.filter(res=>{
                var child = _this.sysAuths.filter(obj=>{
                    if(obj.service == res.key){
                        return true;
                    }else {
                        return false;
                    }
                })
                if(child.length!=0){
                   return  res['child'] = child
                }else {
                    return false
                }
            })
        },
        onChange(checkedList){
            this.checkAll = checkedList;
            if(this.checkAll.length ==this.sysAuths.length && this.sysAuths.length>0){
                this.check = true;
            }else {
                this.check = false;
            }
        },
        changeAll(e){
            if(e.target.checked){
            //    全选
                this.sysAuths.filter(res=>{
                    this.checkAll.push(res.url)
                })
            }else {
                this.checkAll = [];
            }
        },
        //删除选中的
        delAll(){
             this.sysAuths = this.sysAuths.filter(res=>{
                 if(this.checkAll.indexOf(res.url)==-1){
                     return res;
                 }else {
                     return false;
                 }
             })
            this.checkAll = [];
            this.check = false;
        },
        handSelect(curRow) {
            var treeId = curRow.treeId;
            if (treeId != "0") {
                this.queryParam.Q_CATEGORY_ID__S_EQ = treeId;
            } else {
                delete this.queryParam.Q_CATEGORY_ID__S_EQ;
            }
            this.loadData(this.queryParam);
        },
    },
    watch:{
        sysAuths:{
            handler(o,_o){
                this.reconsitution()
            },
            deep:true
        }
    }
}
</script>

<style scoped>
.appGrantRights{
    position: relative;
}
.appGrantTableList{
    position: absolute;
    top: 34px;
    bottom: 0;
    left: 0;
    right: 0;
}
.appGrantContent{
    position: absolute;
    top: 38px;
    bottom: 0;
    width: 100%;
    overflow: auto;
}
.appGrantTableListHead{
    height: 30px;
    background-color: #f0f2f5;
    line-height: 30px;
    padding: 0px 10px;
    margin-bottom: 5px;
}
.appGrantTableListHead span:nth-child(1){
    color: #555555;
    font-weight: 700;
}
.appGrantTableListHead span:nth-child(2){
    color: #8a9199;
    margin-left: 11px;
}
.appGrantCheckbox{
    display: flex;
    height: 37px;
    line-height: 37px;
}
.appGrantCheckbox >div:nth-child(1){
    flex: 1;
    margin-left: 10px;
}
.appGrantCheckbox >div:nth-child(2){
    text-align: right;
    margin-right: 10px;
    color: #f5222d;
    cursor: pointer;
}
.appGrantTableList{
    border-radius: 5px;
    border: solid 1px #dadde0;
    margin: auto;
    width: 90%;
    margin-top: 12px;
}
.appGrantTableApi{
    border-left: 2px solid #1890ff;
    height: 13px;
    line-height: 13px;
    margin:auto;
    margin-top: 20px;
    width: 90%;
}
.appGrantTableApi span:nth-child(1){
    margin-left: 9px;
    font-family: MicrosoftYaHei-Bold;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    color: #46494d;
}
.appGrantTableApi span:nth-child(2){
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    color: #8a9199;
    float: right;
}
.appGrantTable li{
    display: flex;
    padding:0px 9px;
    color: #555555;
    font-size: 12px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
}
.appGrantTable li:hover{
    background-color: #e3ecff;
}
.appGrantTable li span:nth-child(3){
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appGrantTable li:hover span:nth-child(4){
    display: block;
}
.appGrantTable li span:nth-child(4){
    display: none;
}
.appGrantTableHead{
    border-radius: 3px;
    color: #ffffff;
    height: 20px;
    line-height: 20px;
    margin: 5px 6px 5px 0px;
    padding: 0px 6px;
}
.color_798fff{
    background-color: #798fff;
}
.color_83cd6c{
    background-color: #83cd6c;
}
.color_ffbb3f{
    background-color: #ffbb3f;
}
.color_ff6d6d{
    background-color: #ff6d6d;
}
.appGrantRight{
    position: absolute;
    top:50%;
    right: -20px;
    background-color: #1890ff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    cursor: pointer;
    z-index:99
}
.appGrant{
    display: flex;
    height: 100%;
    overflow: hidden;
}
.appGrant >div:nth-child(1){
    flex: 1;
    padding: 10px;
    border: 1px solid #dadde0;
}
.appGrant >div:nth-child(2){
   width: 300px;
}
.appGrantLeft{
    display: flex;
    flex-direction: column;
    position: relative;
}
.appGrantLeft >div:nth-child(2){
    flex: 1;
}
.appGrant>>>.rx-left{
    border-right: none!important;
}
.appGrant>>>.rx-fit{
    padding: 0px!important;
}
</style>
